<template>
	<div class="venuecon">
		<div class="venuemain">
			<p class="fixed-top">
				场馆选择
				<a-icon @click="closeFunction" :style="{ fontSize: '20px', float: 'right', margin: '10px' }"
					type="close-circle" />
			</p>
			<div class="main" id="new_message">
				<a-form>
					<a-form-item label="场地">
						<a-select show-search v-model="Venuevalue" @change="VenuevalueFun" option-filter-prop="children"
							:filter-option="filterOption">
							<a-select-option v-for="(item, i) in VenuePageList" :key="item.ID" :value="item.ID">
								{{ item.Name }}-人数限制:{{ item.PeopleNum=='-1'||item.PeopleNum==null?'不限制':(item.PeopleNum||0)+'人' }}</a-select-option>
						</a-select>
					</a-form-item>
					<div v-if="$route.name!=='addActivity'&&$route.name!=='UserUpdateActivity'">
						<a-form-item label="学生申请" v-if="Venuevalue!=''">
							<a-radio-group name="radioGroup" disabled v-model="IsAgreeStudentReserve">
								<a-radio :value="true">
									允许
								</a-radio>
								<a-radio :value="false">
									不允许
								</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item label="活动申请" v-if="Venuevalue!=''">
							<a-radio-group name="radioGroup" disabled v-model="IsAgreeActivityReserve">
								<a-radio :value="true">
									允许
								</a-radio>
								<a-radio :value="false">
									不允许
								</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item label="最多可预约订单数" v-if="Venuevalue!=''">
							<a-input v-model="MaxOrderNum" disabled />
						</a-form-item>
						<a-form-item label="提前入场时间(分)" v-if="Venuevalue!=''">
							<a-input v-model="AdvanceEnterTime" disabled />
						</a-form-item>
						<a-form-item label="最大可预约未来天数" v-if="Venuevalue!=''">
							<a-input v-model="AdvanceReserveDay" disabled />
						</a-form-item>
					</div>
					<a-form-item label="时间">
						<a-range-picker disabled style="width: 545px;margin-right:10px;" v-model="DateTime"
							format="YYYY/MM/DD" />
						<a-button-group>
							<a-button type="primary" @click="dataFun(1)"
								:disabled="moment(DateTime[0]).format('YYYY-MM-DD')===moment().format('YYYY-MM-DD')">
								<a-icon type="left" />
								上一周
							</a-button>
							<a-button type="primary" @click="dataFun(2)">
								<a-icon type="right" />
								下一周
							</a-button>
						</a-button-group>
					</a-form-item>
				</a-form>
				<el-table v-if="data.length > 0" :data="data1" border highlight-current-row
					style="width: 911px;margin:0 auto;">
					<el-table-column prop="week" v-for="(item, o) in data" :key="o" width="130">
						<template slot="header" slot-scope="scope">
							<span style="display: none;">{{ msg }}</span>
							<div style="text-align:center;">{{ weekList.filter(m => m.num == item.WeekDay)[0].week }}
							</div>
							<div style="text-align:center;">{{ item.Date }}</div>
						</template>
						<template slot-scope="scope">
							<div style="cursor: pointer;" class="list" v-if="list.State == 0"
								:class="{ on: venueReserveData.filter(n => n.VenueTimeTableID == list.VenueTimeTableID).length > 0 ? true : false }"
								v-for="(list, i) in item.Data" :key="i" @click="selectFun(list, o, i)">
								<span style="display: none;">{{ msg }}</span>
								<span class="listspan">{{ list.VenueTimeTable }}</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="fixed-bottom">
					<a-button type="primary" @click="handleSubmit">确定</a-button>
					<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import Func from '@/utils/func';
	import {
		DoGetVenueTypeListCommon,
		DoGetVenuePageListCommon,
		DoGetVenueTimeTableListCommon
	} from '@/api/follow';
	const data = [];
	export default {
		components: {},
		data() {
			return {
				IsAgreeStudentReserve: Boolean,
				IsAgreeActivityReserve: Boolean,
				MaxOrderNum: "",
				AdvanceEnterTime: "",
				AdvanceReserveDay: "",
				data: [],
				data1: [1],
				VenueTypevalue: '',
				Venuevalue: '',
				VenueTypeList: [],
				VenuePageList: [],
				DateTime: [moment(), moment().add(7, 'd')],
				venueReserveData: [],
				weekList: [{
						week: '周一',
						num: 1
					},
					{
						week: '周二',
						num: 2
					},
					{
						week: '周三',
						num: 3
					},
					{
						week: '周四',
						num: 4
					},
					{
						week: '周五',
						num: 5
					},
					{
						week: '周六',
						num: 6
					},
					{
						week: '周日',
						num: 7
					}
				],
				msg: 0
			};
		},
		computed: {},
		created() {
			this.GetVenueTypeList();
			this.GetVenuePageList();
		},
		mounted() {},
		methods: {
			moment,
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			async GetVenueTypeList() {
				let res = await DoGetVenueTypeListCommon();
				this.VenueTypeList = res.data.data;
			},
			async GetVenuePageList() {
				let res = await DoGetVenuePageListCommon({
					pageIndex: 1,
					pageSize: 999,
					isAgreeActivityReserve: true
				});
				this.VenuePageList = res.data.data;
			},
			async VenuevalueFun(e) {
				this.VenuePageList.map(item => {
					if (item.ID == e) {
						this.IsAgreeStudentReserve = item.IsAgreeStudentReserve;
						this.IsAgreeActivityReserve = item.IsAgreeActivityReserve;
						this.MaxOrderNum = item.venueTypeData.MaxOrderNum;
						this.AdvanceEnterTime = item.venueTypeData.AdvanceEnterTime;
						this.AdvanceReserveDay = item.venueTypeData.AdvanceReserveDay;
					}
				})
				let data = {};
				data.venueID = e;
				data.startDate = this.DateTime[0].format('YYYY-MM-DD');
				data.endDate = this.DateTime[1].format('YYYY-MM-DD');
				let res = await DoGetVenueTimeTableListCommon(data);
				this.data1 = ['1']
				this.data = res.data.data;
				console.log(this.data)
				this.msg++
			},
			async dataFun(type) {
				if (!this.Venuevalue) {
					this.$message.error('请选择场地！');
					return false;
				}
				if (type == 1) {
					this.DateTime = [moment(this.DateTime[0]).subtract(7, 'd'), moment(this.DateTime[1]).subtract(7,
						'd')];
				} else {
					this.DateTime = [moment(this.DateTime[0]).add(7, 'd'), moment(this.DateTime[1]).add(7, 'd')];
				}
				let data = {};
				data.venueID = this.Venuevalue;
				data.startDate = this.DateTime[0].format('YYYY-MM-DD');
				data.endDate = this.DateTime[1].format('YYYY-MM-DD');
				let res = await DoGetVenueTimeTableListCommon(data);
				this.data = res.data.data;
				this.msg++
			},
			selectFun(item, o, i) {
				let m = this.venueReserveData.findIndex(m => m.VenueTimeTableID == item.VenueTimeTableID);
				if (m > -1) {
					this.venueReserveData.splice(m, 1);
				} else {
					this.venueReserveData.push({
						...item,
						TimeTableID: item.VenueTimeTableID,
						VenueName: this.VenuePageList.filter(m => m.ID == this.Venuevalue)[0].Name
					});
				}
			},
			handleSubmit() {
				this.closeFunction(this.venueReserveData);
			},
			closeFunction(data) {
				this.$emit('closevenue', data);
			}
		}
	};
</script>

<style lang="less" scoped>
	.venuecon {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.venuemain {
		position: absolute;
		width: 1000px;
		height: 90%;
		border-radius: 14px;
		background: #fff;
		left: 50%;
		margin-left: -500px;
		top: 5%;
		overflow-y: auto;
		padding-top: 50px;
	}

	/deep/.ant-form-item {
		margin: 20px 50px;
		display: flex;
	}

	/deep/.ant-form-item-label {
		width: 145px !important;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker,
	/deep/.ant-time-picker {
		width: 100%;
	}

	.fixed-top {
		width: 100%;
		position: absolute;
		line-height: 30px;
		top: 0px;
		background-color: white;
		z-index: 999;
		padding: 10px 0 0 10px;
	}

	.main {
		height: 90%;
		overflow-y: scroll;
	}

	.fixed-bottom {
		width: 164px;
		left: 50%;
		bottom: 10px;
		margin: 0px 0px 0px -82px !important;
		position: absolute;
		background-color: white;
		z-index: 999;
	}

	/deep/.ant-input-disabled {
		background: #fff;
		color: #333;
	}

	.list {
		line-height: 26px;
		border: 1px solid #ccc;
		padding: 0 5px;
		border-radius: 6px;
		margin-bottom: 5px;
	}

	.list.on {
		background: #40a9ff;
		color: #fff;
		border: 1px solid #40a9ff;
	}
</style>
